<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会信息化项目实施流程图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', 'PingFang SC', 'Segoe UI', sans-serif;
            background: #f8f9fa;
            padding: 30px 15px;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1800px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
            padding: 35px 30px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 2px solid #e9ecef;
        }
        
        .org-name {
            color: #495057;
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        h1 {
            color: #212529;
            font-size: 26px;
            margin-bottom: 8px;
            font-weight: 700;
            letter-spacing: 1px;
        }
        
        .subtitle {
            color: #6c757d;
            font-size: 13px;
        }
        
        .swimlane {
            margin-bottom: 20px;
            border-radius: 10px;
            overflow: visible;
            border: 1px solid #dee2e6;
            position: relative;
            z-index: 1;
        }
        
        .swimlane:hover {
            z-index: 100;
        }
        
        .swimlane-header {
            padding: 14px 22px;
            font-weight: 600;
            font-size: 15px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            z-index: 10;
        }
        
        .swimlane-title {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .swimlane-desc {
            font-size: 12px;
            font-weight: 400;
            opacity: 0.92;
        }
        
        .swimlane-content {
            background: #ffffff;
            padding: 60px 20px 40px 20px;
            display: flex;
            flex-wrap: nowrap;
            gap: 16px;
            align-items: center;
            overflow-x: auto;
            overflow-y: visible;
            position: relative;
        }
        
        .swimlane-content::-webkit-scrollbar {
            height: 6px;
        }
        
        .swimlane-content::-webkit-scrollbar-track {
            background: #f1f3f5;
            border-radius: 3px;
        }
        
        .swimlane-content::-webkit-scrollbar-thumb {
            background: #adb5bd;
            border-radius: 3px;
        }
        
        .node {
            background: white;
            padding: 18px 24px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            font-size: 14px;
            color: #212529;
            position: relative;
            transition: box-shadow 0.3s ease;
            border: 2px solid #dee2e6;
            min-width: 180px;
            max-width: 200px;
            text-align: center;
            flex-shrink: 0;
            font-weight: 500;
            cursor: pointer;
        }
        
        .node:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
            border-color: #adb5bd;
        }
        
        .node:hover .tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(-5px);
        }
        
        .tooltip {
            opacity: 0;
            visibility: hidden;
            position: fixed;
            background: rgba(33, 37, 41, 0.97);
            color: white;
            padding: 16px 20px;
            border-radius: 8px;
            font-size: 13px;
            line-height: 1.6;
            white-space: normal;
            width: 400px;
            max-width: 90vw;
            z-index: 999999;
            text-align: left;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            transition: opacity 0.3s ease, visibility 0.3s ease;
            pointer-events: none;
        }
        
        .tooltip.show-below {
            /* 通过JavaScript动态计算位置 */
        }
        
        .tooltip.show-below::after {
            bottom: auto;
            top: -8px;
            border-top-color: transparent;
            border-bottom-color: rgba(33, 37, 41, 0.97);
        }
        
        .tooltip::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            border: 8px solid transparent;
            border-top-color: rgba(33, 37, 41, 0.97);
            border-bottom-color: transparent;
        }
        
        .tooltip-title {
            font-weight: 600;
            margin-bottom: 10px;
            font-size: 14px;
            color: #4dabf7;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 8px;
        }
        
        .node.start {
            border: 2px solid #339af0;
            background: #e7f5ff;
            font-weight: 600;
        }
        
        .node.end {
            border: 2px solid #51cf66;
            background: #ebfbee;
            font-weight: 600;
        }
        
        .node.important {
            border: 2px solid #ff922b;
            background: #fff4e6;
            font-weight: 600;
        }
        
        .node.test {
            border: 2px solid #ff6b6b;
            background: #ffe3e3;
        }
        
        .arrow {
            color: #adb5bd;
            font-size: 22px;
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }
        
        .lane1 { background: linear-gradient(135deg, #5f3dc4 0%, #7950f2 100%); }
        .lane2 { background: linear-gradient(135deg, #d6336c 0%, #e64980 100%); }
        .lane3 { background: linear-gradient(135deg, #1098ad 0%, #15aabf 100%); }
        .lane4 { background: linear-gradient(135deg, #2f9e44 0%, #37b24d 100%); }
        
        .integration-wrapper {
            display: flex;
            flex-direction: column;
            gap: 14px;
            min-width: 850px;
            flex-shrink: 0;
        }
        
        .main-integration-node {
            background: #e3fafc;
            padding: 18px 24px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            font-size: 14px;
            color: #0b7285;
            border: 2px solid #22b8cf;
            text-align: center;
            font-weight: 600;
            position: relative;
            cursor: pointer;
            transition: box-shadow 0.3s ease;
        }
        
        .main-integration-node:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        }
        
        .integration-note {
            margin-top: 6px;
            font-size: 11px;
            color: #0c8599;
            font-weight: 400;
        }
        
        .sub-nodes-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            padding: 18px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px dashed #adb5bd;
        }
        
        .sub-node {
            background: #e7f5ff;
            padding: 12px 16px;
            border-radius: 6px;
            font-size: 13px;
            color: #1864ab;
            border: 1px solid #74c0fc;
            text-align: center;
            transition: all 0.3s ease;
            font-weight: 500;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
            cursor: pointer;
            position: relative;
        }
        
        .sub-node:hover {
            background: #d0ebff;
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
            border-color: #339af0;
        }
        
        .sub-node.required::after {
            content: '必接';
            position: absolute;
            top: -6px;
            right: -6px;
            background: #fa5252;
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 3px;
            font-weight: 600;
        }
        
        .icon {
            font-size: 20px;
        }
        
        .flow-indicator {
            text-align: center;
            margin: 8px 0;
            position: relative;
        }
        
        .flow-line {
            width: 2px;
            height: 16px;
            background: linear-gradient(180deg, #339af0, #7950f2);
            margin: 0 auto;
            position: relative;
        }
        
        .flow-line::after {
            content: '▼';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            color: #7950f2;
            font-size: 10px;
        }
        
        .legend {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 30px;
            padding: 16px;
            background: #f8f9fa;
            border-radius: 10px;
            flex-wrap: wrap;
            border: 1px solid #dee2e6;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: #495057;
            font-weight: 500;
        }
        
        .legend-box {
            width: 24px;
            height: 24px;
            border-radius: 5px;
            border: 2px solid;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        }
        
        @media print {
            body {
                background: white;
            }
            .tooltip {
                display: none !important;
            }
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const nodes = document.querySelectorAll('.node, .sub-node, .main-integration-node');
            
            nodes.forEach(node => {
                node.addEventListener('mouseenter', function(e) {
                    const tooltip = this.querySelector('.tooltip');
                    if (!tooltip) return;
                    
                    // 重置类名
                    tooltip.classList.remove('show-below');
                    
                    // 获取节点在视口中的位置
                    const rect = this.getBoundingClientRect();
                    const tooltipHeight = 250; // 预估提示框高度
                    const spacing = 12; // 间距
                    
                    // 计算提示框位置
                    let top, left;
                    
                    // 判断上方是否有足够空间
                    if (rect.top > tooltipHeight + spacing + 20) {
                        // 显示在上方
                        top = rect.top - tooltipHeight - spacing;
                        tooltip.style.transform = 'translateX(-50%)';
                    } else {
                        // 显示在下方
                        top = rect.bottom + spacing;
                        tooltip.classList.add('show-below');
                        tooltip.style.transform = 'translateX(-50%)';
                    }
                    
                    // 水平居中对齐节点
                    left = rect.left + rect.width / 2;
                    
                    // 应用位置
                    tooltip.style.top = top + 'px';
                    tooltip.style.left = left + 'px';
                });
                
                node.addEventListener('mouseleave', function(e) {
                    const tooltip = this.querySelector('.tooltip');
                    if (tooltip) {
                        // 清除内联样式，让CSS过渡生效
                        setTimeout(() => {
                            tooltip.style.top = '';
                            tooltip.style.left = '';
                        }, 300);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="org-name">山东省卫生健康委员会</div>
            <h1>信息化项目实施流程图</h1>
            <div class="subtitle">Information Project Implementation Process</div>
        </div>
        
        <div class="swimlane">
            <div class="swimlane-header lane1">
                <div class="swimlane-title">
                    <span class="icon">🏢</span>
                    <span>项目管理方</span>
                </div>
                <div class="swimlane-desc">负责项目组织、审核、验收等管理工作</div>
            </div>
            <div class="swimlane-content">
                <div class="node start">
                    项目合同签订
                    <div class="tooltip">
                        <div class="tooltip-title">项目合同签订</div>
                        业主单位与承建单位签订正式合同，明确项目范围、预算、工期等关键要素，为项目实施提供法律保障。
                    </div>
                </div>
                <span class="arrow">→</span>
                <div class="node">
                    启动会
                    <div class="tooltip">
                        <div class="tooltip-title">启动会（首次会议）</div>
                        业主单位主持，承建单位汇报项目相关情况，测试单位宣贯项目测评要求，监理单位宣贯项目工作要求，使用单位提出工作要求，确定各方项目负责人，明确项目管理流程及制度。
                    </div>
                </div>
                <span class="arrow">→</span>
                <div class="node">
                    开工
                    <div class="tooltip">
                        <div class="tooltip-title">开工</div>
                        承建单位提交开工申请及相关附件，监理单位审核，业主单位（使用单位）确认，下发开工通知。经审核后的实施方案与进度计划将用于指导整个项目的工期。
                    </div>
                </div>
                <span class="arrow">→</span>
                <div class="node">
                    初验
                    <div class="tooltip">
                        <div class="tooltip-title">初验</div>
                        在正式验收前由业主单位组织项目各方对验收准备情况进行检查，规避在正式验收时的问题。预初验时项目材料应全部完成签字盖章。预验收问题整改完成后由业主单位邀请专家、用户处室、项目各方开展正式初验工作，初验通过后出具初验意见、初验报告。
                    </div>
                </div>
                <span class="arrow">→</span>
                <div class="node">
                    大数据局验收申请
                    <div class="tooltip">
                        <div class="tooltip-title">大数据局验收申请</div>
                        承建单位应根据数据共享需求配合业主单位完成数据资源汇聚及更新，完成数据资源"一本账"编制与云原生技术应用情况评估，配合业主单位演示数据资产，根据《验收大纲》要求准备项目验收资料并配合业主单位在政务管理系统向省大数据局提交终验申请。
                    </div>
                </div>
                <span class="arrow">→</span>
                <div class="node important">
                    竣工验收<br/><small style="font-size: 11px; opacity: 0.8;">(同步信创验收)</small>
                    <div class="tooltip">
                        <div class="tooltip-title">竣工验收（终验）</div>
                        正式验收前由业主单位组织项目各方对验收准备情况进行检查。预验收时项目材料应全部完成签字盖章。预验收问题整改完成后由业主单位邀请专家（专家验收小组至少有一名信创专家）、用户处室、项目各方开展正式竣工验收工作，验收通过后出具竣工验收意见、信创验收意见、终验报告。
                    </div>
                </div>
                <span class="arrow">→</span>
                <div class="node end">
                    大数据验收报备
                    <div class="tooltip">
                        <div class="tooltip-title">大数据局验收报备</div>
                        出具后的竣工验收意见、信创验收意见、终验报告由业主单位在政务管理系统向省大数据进行报备，承建单位将系统开发代码、电子文档分别储存光盘移交业主单位。
                    </div>
                </div>
            </div>
        </div>
        
        <div class="flow-indicator">
            <div class="flow-line"></div>
        </div>
        
        <div class="swimlane">
            <div class="swimlane-header lane2">
                <div class="swimlane-title">
                    <span class="icon">💻</span>
                    <span>技术实施方</span>
                </div>
                <div class="swimlane-desc">负责系统开发、测试、部署等技术工作</div>
            </div>
            <div class="swimlane-content">
                <div class="node">
                    云资源申请
                    <div class="tooltip">
                        <div class="tooltip-title">云资源申请</div>
                        <strong>新建系统：</strong>承建单位梳理云资源需求清单，编写并向数管中心云资源负责人提交云资源申请表（提供使用单位盖章后的扫描件）、关于项目资源申请的函并提供系统架构图、网络拓扑图及系统说明文件。<br/><br/>
                        <strong>原有系统升级：</strong>承建单位梳理原系统申请的政务资源，提供云资源申请评估联系单、上云项目云资源确认单、关于项目云资源备案的函与附件现用云资源备案表。
                    </div>
                </div>
                <span class="arrow">→</span>
                <div class="node">
                    需求调研
                    <div class="tooltip">
                        <div class="tooltip-title">需求调研</div>
                        承建单位结合项目约定的建设内容开展现场需求调研，每次调研后编写需求调研记录，经过多次详细需求调研后，汇总需求调研记录整理形成需求确认单，并经相关单位确认，根据需求调研记录、需求确认单编写需求调研报告、需求规格说明书，最终出具的需求规格说明书由业主单位组织需求评审。
                    </div>
                </div>
                <span class="arrow">→</span>
                <div class="node">
                    规划设计
                    <div class="tooltip">
                        <div class="tooltip-title">规划设计</div>
                        承建单位根据评审通过后的需求规格说明书、承建合同等文件进行概要设计，编写概要设计说明书，由业主单位组织概要设计评审。概要设计完成后，根据评审通过的概要设计说明书进行系统详细设计（含数据库设计与接口设计），出具详细设计说明书后由业主单位组织详细设计评审。
                    </div>
                </div>
                <span class="arrow">→</span>
                <div class="node">
                    项目实施
                    <div class="tooltip">
                        <div class="tooltip-title">项目实施</div>
                        承建单位根据承建合同、招投标文件、需求和设计文档进行硬件设备采购安装及软件功能开发，并在实施过程中进行现场自检及功能随检，并出具相关实施文档。
                    </div>
                </div>
                <span class="arrow">→</span>
                <div class="node">
                    自检自测
                    <div class="tooltip">
                        <div class="tooltip-title">系统自测</div>
                        研发完成后的系统需在国产信创环境下进行规范性的全面自检自测，通过预设流程验证功能、性能、安全、兼容性及稳定性等内容。
                    </div>
                </div>
                <span class="arrow">→</span>
                <div class="node">
                    系统部署上线
                    <div class="tooltip">
                        <div class="tooltip-title">系统部署上线</div>
                        自测通过后的系统根据国产化信创要求进行适配，适配完成后部署上线。
                    </div>
                </div>
                <span class="arrow">→</span>
                <div class="node">
                    培训、业务系统对接
                    <div class="tooltip">
                        <div class="tooltip-title">培训、业务系统对接</div>
                        初验结束后承建单位根据培训方案，对用户处室开展项目培训工作，培训应面向整个使用群体，培训过程应要求用户进行签到，现场进行拍照留痕，涉及线上培训的录制培训视频，进行线上签到。相关业务系统应进行接入，为系统试用做好准备。
                    </div>
                </div>
            </div>
        </div>
        
        <div class="flow-indicator">
            <div class="flow-line"></div>
        </div>
        
        <div class="swimlane">
            <div class="swimlane-header lane3">
                <div class="swimlane-title">
                    <span class="icon">🔗</span>
                    <span>对接集成方</span>
                </div>
                <div class="swimlane-desc">负责各类系统平台对接集成工作</div>
            </div>
            <div class="swimlane-content">
                <div class="integration-wrapper">
                    <div class="main-integration-node">
                        系统对接中心
                        <div class="integration-note">数据资源系统、态势感知平台原则上必须接入</div>
                        <div class="tooltip">
                            <div class="tooltip-title">系统对接要求</div>
                            <strong>必接系统：</strong>数据资源系统、态势感知平台原则上必须接入，对接联系数管中心相关负责人。<br/><br/>
                            <strong>爱山东：</strong>系统具备面向群众的功能需对接爱山东。<br/><br/>
                            <strong>山东通：</strong>具备面向政府的管理端功能需对接山东通。爱山东、山东通对接前需由使用处室向规划处、数管中心提交申请，经审核同意后对接。<br/><br/>
                            <strong>齐鲁智脑、图说健康：</strong>系统功能存在数据展示要求的可对接齐鲁智脑（省厅）、图说健康（委内）。
                        </div>
                    </div>
                    <div class="sub-nodes-grid">
                        <div class="sub-node required">
                            📊 数据资源系统
                            <div class="tooltip">
                                <div class="tooltip-title">数据资源系统</div>
                                必须接入的系统，负责数据资源的统一管理和共享。联系数管中心相关负责人进行对接。
                            </div>
                        </div>
                        <div class="sub-node required">
                            🛡️ 态势感知平台
                            <div class="tooltip">
                                <div class="tooltip-title">态势感知平台</div>
                                必须接入的系统，用于网络安全态势监测和预警。联系数管中心相关负责人进行对接。
                            </div>
                        </div>
                        <div class="sub-node">
                            📱 爱山东
                            <div class="tooltip">
                                <div class="tooltip-title">爱山东</div>
                                系统具备面向群众的功能需对接。对接前需由使用处室向规划处、数管中心提交申请，经审核同意后对接。
                            </div>
                        </div>
                        <div class="sub-node">
                            💼 山东通
                            <div class="tooltip">
                                <div class="tooltip-title">山东通</div>
                                具备面向政府的管理端功能需对接。对接前需由使用处室向规划处、数管中心提交申请，经审核同意后对接。
                            </div>
                        </div>
                        <div class="sub-node">
                            🏥 省全民健康信息平台数据共享
                            <div class="tooltip">
                                <div class="tooltip-title">省全民健康信息平台数据共享</div>
                                用于健康医疗数据的共享和交换，实现卫生健康信息互联互通。
                            </div>
                        </div>
                        <div class="sub-node">
                            🧠 齐鲁智脑
                            <div class="tooltip">
                                <div class="tooltip-title">齐鲁智脑</div>
                                系统功能存在数据展示要求的可对接齐鲁智脑（省厅）。提供数据可视化和智能分析功能。
                            </div>
                        </div>
                        <div class="sub-node">
                            📈 图说健康
                            <div class="tooltip">
                                <div class="tooltip-title">图说健康</div>
                                系统功能存在数据展示要求的可对接图说健康（委内）。提供健康数据可视化展示。
                            </div>
                        </div>
                    </div>
                </div>
                <span class="arrow">→</span>
                <div class="node">
                    对接省全民健康信息平台单点登录
                    <div class="tooltip">
                        <div class="tooltip-title">省全民健康信息平台单点登录</div>
                        向数管中心相关负责人报备后对接。实现统一身份认证，用户一次登录即可访问多个系统。
                    </div>
                </div>
            </div>
        </div>
        
        <div class="flow-indicator">
            <div class="flow-line"></div>
        </div>
        
        <div class="swimlane">
            <div class="swimlane-header lane4">
                <div class="swimlane-title">
                    <span class="icon">✅</span>
                    <span>质量保障方</span>
                </div>
                <div class="swimlane-desc">负责系统测试、评测、试运行等质量保障工作</div>
            </div>
            <div class="swimlane-content">
                <div class="node test">
                    三方检查、第三方软件测试
                    <div class="tooltip">
                        <div class="tooltip-title">三方检查、第三方软件测试</div>
                        系统上线后由业主单位组织监理单位、承建单位开展三方检查工作，第三方软件测试同步开展。确保系统功能、性能、安全性等符合要求。
                    </div>
                </div>
                <span class="arrow">→</span>
                <div class="node test">
                    试运行、等保测评、密码测评
                    <div class="tooltip">
                        <div class="tooltip-title">试运行、等保测评、密码测评</div>
                        项目试运行期间做好试
                        运行记录并由使用单位出具试运行意见。试运行期间同步开展等保测评测评、密码改造、密码测评工作，密码改造原则上应与山东省卫健委密码应用服务系统进行对接，在无法对接的情况下应提前申请省大数据局的密码服务资源。
                    </div>
                </div>
            </div>
        </div>
        
        <div class="legend">
            <div class="legend-item">
                <div class="legend-box" style="background: #e7f5ff; border-color: #339af0;"></div>
                <span>起始节点</span>
            </div>
            <div class="legend-item">
                <div class="legend-box" style="background: #fff4e6; border-color: #ff922b;"></div>
                <span>重要节点</span>
            </div>
            <div class="legend-item">
                <div class="legend-box" style="background: #ffe3e3; border-color: #ff6b6b;"></div>
                <span>测试节点</span>
            </div>
            <div class="legend-item">
                <div class="legend-box" style="background: #ebfbee; border-color: #51cf66;"></div>
                <span>结束节点</span>
            </div>
        </div>
    </div>
</body>
</html>